

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
  <style>
    .layui-layer-demo .layui-layer-title {
      border: none;
      background-color: #333;
      color: #fff;
    }
    .layui-card span[lay-separator] {
      margin: 0 10px;
      color: #999;
      font-weight: bold;
    }
    body .layui-layer-demo .layui-layer-content {
      overflow: visible;
    }
  </style>
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">

      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this" lay-id="1">频道</li>
          <li lay-id="2">分类</li>
          <li lay-id="3">子分类</li>
        </ul>

        <div class="layui-tab-content">

          <div class="layui-tab-item layui-show">
            <div class="layui-card-body">
              <table id="LAY-novel-freq" lay-filter="LAY-novel-freq"></table>
              <script type="text/html" id="freqToolbar">
                <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                </div>
              </script>
            </div>
          </div>


          <div class="layui-tab-item">

            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
              <div class="layui-form-item">

                <div class="layui-inline">
                    <input type="text" name="name" placeholder="输入分类名" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <select name="freq_id">
                      <option value="">选择频道</option>
                      {foreach $allFreq as $v}
                      <option value="{$v.id}">{$v.name}</option>
                      {/foreach}
                    </select>
                </div>

                <div class="layui-inline">
                  <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-class-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                  </button>
                </div>

              </div>
            </div>
            <div class="layui-card-body">
              <table id="LAY-novel-cla" lay-filter="LAY-novel-cla"></table>
              <script type="text/html" id="classToolbar">
                <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                </div>
              </script>
              <script type="text/html" id="freqTpl">
                {{#  if(d.freq){ }}
                  {{#  layui.each(d.freq, function(index, item){ }}
                      <span class="layui-badge-rim">{{ item.name }}</span>
                  {{#  }); }}
                {{#  } }}
              </script>
            </div>

          </div>

          <div class="layui-tab-item">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
              <div class="layui-form-item">

                <div class="layui-inline">
                  <input type="text" name="name" placeholder="输入分类名" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                  <select name="freq_id">
                    <option value="">选择频道</option>
                    {foreach $allFreq as $v}
                    <option value="{$v.id}">{$v.name}</option>
                    {/foreach}
                  </select>
                </div>

                <div class="layui-inline">
                  <select name="class_id" lay-search>
                    <option value="">选择分类</option>
                    {foreach $allClass as $v}
                    <option value="{$v.id}">{$v.name}</option>
                    {/foreach}
                  </select>
                </div>

                <div class="layui-inline">
                  <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-son-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                  </button>
                </div>

              </div>
            </div>
            <div class="layui-card-body">
              <table id="LAY-novel-son" lay-filter="LAY-novel-son"></table>
              <script type="text/html" id="parentTpl">
                {{d.freq.name}}<span lay-separator="">·</span>{{d.parent_class.name}}
              </script>
              <script type="text/html" id="sonToolbar">
                <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                </div>
              </script>
            </div>

          </div>


        </div>

      </div>
    </div>
  </div>


  <script type="text/html" id="table-useradmin-admin">
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
  </script>

 <script src="/static/layuiadmin/layui/layui.js"></script>
  <script>
    layui.use(['element','table'], function(){
      var element = layui.element;
      var table = layui.table;

      //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
      var layid = location.hash.replace(/^#docDemoTabBrief=/, '');
      if (!layid){
        layid = 2;
      }
      element.tabChange('docDemoTabBrief', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

      //监听Tab切换，以改变地址hash值
      element.on('tab(docDemoTabBrief)', function(){
        location.hash = 'docDemoTabBrief='+ this.getAttribute('lay-id');
        table.resize('LAY-novel-freq');
        table.resize('LAY-novel-son');
        table.resize('LAY-novel-cla');
      });
    });
  </script>

  {include file="novel/class_manage/freq" /}
  {include file="novel/class_manage/class" /}
  {include file="novel/class_manage/class_son" /}

</body>
</html>

